<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="amazeui/css/amazeui.min.css">
    <link rel="stylesheet" href="bootstrap-3.3.5-dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="Semantic-UI-master/dist/semantic.css">

    <script type="text/javascript" src="bootstrap-3.3.5-dist/js/jquery.min.js"></script>
    <script type="application/javascript" src="bootstrap-3.3.5-dist/js/bootstrap.min.js"></script>
    <script type="application/javascript" src="amazeui/js/amazeui.min.js"></script>
    <script type="application/javascript" src="Semantic-UI-master/dist/semantic.min.js"></script>
    <script type="application/javascript" src="vue.min.js"></script>
    <script type="application/javascript" src="layer/layer.js"></script>
<style>
    .isactive{



    }





</style>

</head>
<body>

<div class="row">
    <div class="col-md-2">.col-md-1</div>
    <div class="col-md-10">.col-md-1</div>
</div>


<div class="container" id="clock">
    <div class="row">

        <div class="row" v-for="(item, index) in lists">
            <div class="col-md-2">{{ item.cate}}</div>
            <div class="col-md-2"><input type="number" v-model="lists[index].count" @change="buy"></div>
            <div class="col-md-2">{{ item.money | currency }}</div>
            <div class="col-md-2" @click="del(index)"><a href="#"
                                                         class="am-close am-close-alt am-close-spin am-icon-times"></a>
            </div>
            <div class="col-md-2">
                <div class="ui fitted toggle checkbox">
                    <input type="checkbox" name="test" v-bind:value="index" @click="buy">
                    <label></label>
                </div>

            </div>
            <div class="col-md-2"><div class="ui rating"   v-bind:data-rating="lists[index].hot" ></div></div>
            <hr data-am-widget="divider" style="" class="am-divider am-divider-dashed"/>

        </div>


        <button class="btn btn-primary" type="button">
            商品总数 <span class="badge"> {{checknum}} </span>
        </button>
        <button type="button" class="btn btn-default  active">
            商品总额 <span class="badge" id="num2"> 0</span>
        </button>
        <button class="btn btn-block" @click="youhui">优惠券1</button>

        <p id="num1"></p>

    </div>
</div>


<div class="ui basic modal">
    <i class="close icon"></i>
    <div class="header">
        警告
    </div>
    <div class="image content">
        <div class="image">
            <i class="archive icon"></i>
        </div>
        <div class="description">
            <p>你确定要删除该商品吗?</p>
        </div>
    </div>
    <div class="actions">
        <div class="two fluid ui inverted buttons">
            <div class="ui cancel red basic inverted button">
                <i class="remove icon"></i>
                No
            </div>
            <div class="ui ok green basic inverted button">
                <i class="checkmark icon"></i>
                Yes
            </div>
        </div>
    </div>
</div>


<script type="application/javascript">

    var count1 = 0;
    var vm = new Vue({
        el: '#clock',

        data: {
            lists: [
                {cate: '香蕉', money: 20, count: 1,hot:5},
                {cate: '苹果', money: 36, count: 1,hot:2},
                {cate: '梨', money: 70, count: 1,hot:3},
                {cate: '哈密瓜', money: 30, count: 1,hot:2},
                {cate: '大米', money: 25, count: 1,hot:1},
                {cate: '麦子', money: 28, count: 1,hot:3},
                {cate: '玉米', money: 24, count: 1,hot:4}


            ],
            checkedNames: [],
            checknum: 0,


        },
        methods: {

            del: function (thisindex) {
                if (count1 != 0) {

                    alert('请勿在删除前勾选商品');

                }
               else {
                    $('.ui.basic.modal')
                            .modal({
                                closable  : false,

                                onApprove : function() {
                                    vm.lists.splice(thisindex, 1);
                                    vm.count2();
                                    vm.buy();
                                }
                            })
                            .modal('show');




                }
            },
            youhui: function () {
                vm.lists[2].money = 56;
                vm.buy();
                vm.count2();
            },

            buy: function () {

                var result = [];
                vm.checkedNames = [];
                $('input[name="test"]:checked').each(function () {

                    vm.checkedNames.push($(this).val());

                    result = vm.checkedNames;
                });

                console.log(result);
                vm.checknum = 0;
                count1 = 0;
                for (var i = 0; i < result.length; i++) {
                    // count1=0;
                    var x = result[i];
                    vm.checknum = vm.checknum + vm.lists[x].count;
                    count1 = count1 + vm.lists[x].money * vm.lists[x].count;

                }
                document.getElementById('num2').innerHTML = count1;


            },
            count2: function () {
                var count2 = 0;
                for (var i = 0; i < vm.lists.length; i++) {
                    count2 = count2 + vm.lists[i].money;

                }
                document.getElementById('num1').innerHTML = count2;
            },
            rate:function () {
                $('.ui.rating')
                        .rating({
                            initialRating: 0,
                            maxRating: 5
                        });

            }

        }
    })
    vm.count2();
    vm.rate();
</script>

<div data-am-widget="gotop" class="am-gotop am-gotop-default">
    <a href="#top" title="回到顶部">
        <span class="am-gotop-title">回到顶部</span>
        <i class="am-gotop-icon am-icon-chevron-up"></i>
    </a>
</div>

</body>
</html>